<template>
    <div class="header">
        <div class="container">
            <input v-model="contentAddRO.title" type="text" placeholder="输入文章标题..." />
            <div class="end">
                <span class="remind">文章将自动存入草稿箱</span>
                <el-button type="primary" plain>草稿箱</el-button>
                <el-button ref="pushButton" type="primary" @click="showAdd = true"
                    >{{ isEdit ? '更新' : '发布' }}
                </el-button>
                <el-icon style="margin-left: 20px">
                    <Switch />
                </el-icon>
                <el-avatar
                    style="margin-left: 20px"
                    :size="40"
                    :src="userInfo.avatar ? userInfo.avatar : avatar"
                />
            </div>
        </div>
    </div>
    <el-popover
        ref="popoverRef"
        :visible="showAdd"
        :virtual-ref="pushButton"
        trigger="click"
        virtual-triggering
        width="560"
        placement="bottom-end"
        :offset="15"
    >
        <div>
            <div class="title">
                <span style="color: #1d2129; margin-left: 10px">添加文章</span>
            </div>
            <el-form ref="ruleFormRef" width="560px" label-width="90px" class="form" status-icon>
                <el-form-item class="form-item" label="分类:" prop="name" required>
                    <el-check-tag
                        v-for="(category, index) in categoryList"
                        :key="index"
                        class="tag"
                        :checked="contentAddRO.categoryId === category.id"
                        @click="chickCategory(category)"
                        >{{ category.categoryName }}
                    </el-check-tag>
                </el-form-item>
                <el-form-item class="form-item" label="添加标签:" required>
                    <el-select
                        v-model="chickTagStr"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        :reserve-keyword="false"
                        placeholder="请搜索添加标签"
                        style="width: 80%"
                    >
                        <el-option
                            v-for="item in labels"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item class="form-item" label="文章封面:">
                    <el-upload
                        class="cover-uploader"
                        :on-change="uploadCover"
                        list-type="picture-card"
                        :show-file-list="false"
                        :auto-upload="false"
                        multiple
                    >
                        <img v-if="url" :src="url" alt="#" class="cover" />
                        <img
                            v-else-if="contentAddRO.cover"
                            :src="loadFileUrl + contentAddRO.cover"
                            alt="#"
                            class="cover"
                        />
                        <div v-else style="text-align: center">
                            <el-icon class="el-icon--upload">
                                <Plus />
                            </el-icon>
                            <div class="el-upload__text">上传封面</div>
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item class="form-item" label="收录到专栏:">
                    <el-select
                        v-model="contentAddRO.columnId"
                        placeholder="请选择专栏"
                        style="width: 80%"
                    >
                        <el-option
                            v-for="column in columnList"
                            :key="column.id"
                            :label="column.columnName"
                            :value="column.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item class="form-item" label="创作话题:">
                    <el-select
                        v-model="contentAddRO.topicId"
                        placeholder="请选择话题"
                        style="width: 80%"
                    >
                        <el-option
                            v-for="topic in topicList"
                            :key="topic.id"
                            :label="topic.topicName"
                            :value="topic.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item class="form-item" label="编辑摘要:" required>
                    <el-input
                        v-model="contentAddRO.summary"
                        class="summary"
                        minlength="30"
                        maxlength="100"
                        placeholder="输入摘要"
                        show-word-limit
                        type="textarea"
                    />
                </el-form-item>
                <el-form-item class="form-end">
                    <div style="margin-left: auto">
                        <el-button @click="showAdd = false">取消</el-button>
                        <el-button type="primary" @click="addContentPush">发布</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </el-popover>
    <div class="content">
        <vue-vditor v-model="contentAddRO.content" :options="options" />
    </div>
</template>
<script lang="ts">
    import { defineComponent } from 'vue';
    import { Plus, Switch } from '@element-plus/icons-vue';

    export default defineComponent({
        name: 'BlogEdit',
        components: { Switch, Plus }
    });
</script>

<script lang="ts" setup>
    import { onMounted, ref } from 'vue';
    import { UploadFile } from 'element-plus';
    import { FileType, loadFileUrl, UploadType } from '@/api/file/file';
    import { upload } from '@/api/file/api';
    import { getCategoryAll } from '@/api/content/category/api';
    import { getColumnAll } from '@/api/content/column/api';
    import { getTopicAll } from '@/api/content/topic/api';
    import { ColumnVO } from '@/api/content/column/column';
    import { CategoryVO } from '@/api/content/category/category';
    import { TopicVO } from '@/api/content/topic/topic';
    import { ContentEditRO } from '@/api/content/content/content';
    import { addContent, editContent, getContentInfo } from '@/api/content/content/api';
    import { useRoute } from 'vue-router';
    import labels from '@/pages/blog/edit/labels';
    import VueVditor from '@/components/VueVditor.vue';
    import { options } from '@/pages/blog/edit/options';
    import { useUserStore } from '@/store/user';

    const userInfo = useUserStore();
    const avatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';

    const { params } = useRoute();

    const isEdit = ref(false);
    const pushButton = ref();
    const showAdd = ref(false);
    //头像
    let file: Blob;
    let url = ref();
    let chickTagStr = ref<string[]>([]);

    const contentAddRO = ref<ContentEditRO>({
        title: '',
        content: '',
        label: '',
        categoryId: '',
        summary: '',
        columnId: '',
        topicId: '',
        cover: ''
    });

    async function addContentPush() {
        let cover;
        if (file) {
            let { data } = await upload({
                uploadType: UploadType.LOCAL,
                fileType: FileType.OTHER,
                multipartFiles: [file]
            });
            cover = data.fileIds[0];
        }
        if (cover) contentAddRO.value.cover = cover;
        if (chickTagStr.value && chickTagStr.value.length > 0)
            contentAddRO.value.label = chickTagStr.value.toString();
        if (isEdit.value) {
            await editContent({
                ...contentAddRO.value
            } as ContentEditRO);
            onLoadEdit(params.id as string);
        } else {
            await addContent(contentAddRO.value);
        }
        showAdd.value = false;
    }

    function uploadCover(uploadFile: UploadFile) {
        file = uploadFile.raw as Blob;
        //不依赖后端文件回显
        url.value = URL.createObjectURL(file);
    }

    function chickCategory(categoryVO: CategoryVO) {
        contentAddRO.value.categoryId = categoryVO.id;
    }

    //专栏
    let columnList = ref<ColumnVO[]>([]);
    //分类
    let categoryList = ref<CategoryVO[]>([]);
    //主题
    let topicList = ref<TopicVO[]>([]);
    // 2. 获取DOM引用
    onMounted(() => {
        if (params.id != 'new') {
            isEdit.value = true;
            onLoadEdit(params.id as string);
        }
        onLoadSelect();
    });

    function onLoadEdit(id: string) {
        getContentInfo(id).then(({ data }) => {
            contentAddRO.value = data;
            chickTagStr.value = data.label.split(',');
        });
    }

    function onLoadSelect() {
        getColumnAll().then(({ data }) => {
            columnList.value = data.data;
        });
        getCategoryAll().then(({ data }) => {
            categoryList.value = data.data;
        });
        getTopicAll().then(({ data }) => {
            topicList.value = data.data;
        });
    }
</script>
<style scoped>
    .header {
        height: 64px;
        display: flex;
        align-items: center;
        justify-items: center;
        background-color: white;
    }

    .header input {
        height: 63px;
        border: 0;
        outline: none;
        line-height: 63px;
        font-size: 32px;
        margin-left: 40px;
        width: calc(100% - 60px - 450px);
    }

    .content {
        height: calc(100% - 64px);
    }

    .container {
        width: calc(100% - 60px);
        min-width: 820px;
        display: flex;
        align-items: center;
        margin: 0 auto;
    }

    .remind {
        color: rgb(201, 205, 212);
        margin-right: 12px;
    }

    .end {
        display: flex;
        align-items: center;
        justify-items: center;
        margin-left: auto;
        width: 450px;
    }

    .tag {
        margin: 5px 5px;
        color: #86909c;
        width: 88px;
        text-align: center;
    }

    .title {
        font-size: 18px;
        height: 65px;
        border-bottom: 1px #dadee5 solid;
        line-height: 65px;
    }

    .form-item {
        margin: 30px 0;
    }

    .form-end {
        padding-top: 20px;
        border-top: 1px #dadee5 solid;
    }

    .cover-uploader .cover {
        width: 192px;
        height: 128px;
        display: block;
        font-size: 12px;
    }

    .cover-uploader {
        width: 192px;
        height: 128px;
    }

    .cover-uploader :deep(.el-upload) {
        width: 192px;
        height: 128px;
        background-color: rgb(250, 250, 250);
        flex-direction: column;
    }

    .cover-uploader .el-icon {
        width: 20px;
        height: 20px;
    }

    .cover-uploader .el-icon svg {
        width: 20px;
        height: 20px;
    }

    .summary {
        width: 434px;
    }

    .summary :deep(.el-textarea__inner) {
        background-color: rgb(250, 250, 250);
        height: 120px;
    }
</style>
